<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         /* ol p{
            color: blue;
        } */
        /* ol li{
            color: yellow;
        } */
        /* ol{
            background-color: blueviolet;
        }
        .a{
            background-color: aquamarine;
        }
        .b{
            background-color: transparent;
        }
        .c{
            background-color: aqua;
        } */
        /* .a{
            background-color: aqua;
            height: 500px;
            width: 800px;
            border-radius: 250px;
        } */
    </style>
</head>
<body>
    <div>
        <h3>请选择武器:</h3>
        <input type="checkbox" class="pao">小炮<br>
        <input type="checkbox" class="pao">中炮<br>
        <input type="checkbox" class="pao">大炮<br>
        <input type="checkbox" class="all">全选
    </div>
    <script>
        let all = document.querySelector('.all');
        let pao = document.querySelectorAll('.pao');
        all.onclick = function(){
            for(let i = 0;i < pao.length; i ++){
                pao[i].checked = all.checked;
            }
        }
        for(let i = 0;i < pao.length;i ++){
            pao[i].onclick = function(){
                all.checked = paochecd();
            }
        }
        function paochecd(){
            for(let i = 0; i < pao.length; i ++){
                if(!pao[i].checked){
                    return false;
                }
            }
            return true;
        }
    </script>
    <!-- <div class="a">

    </div>
    <ol>
        <li class="a">a</li>
        <li>
            <p class="b">bbbbb</p>
        </li>
        <li class="c">c</li>
    </ol> -->
</body>
</html>